<template>
  <div class="task-search">
    <van-nav-bar title="搜索" left-arrow @click-left="router.back()" />

    <div class="search-cont">
      <van-search
        v-model="state.value"
        show-action
        placeholder="请输入搜索的职位"
        @search="onSearch"
        @cancel="onCancel"
      />

      <div class="search-item" v-if="!state.searchFlag">
        <h3>搜索历史<van-icon name="delete-o" @click="clearHistory" /></h3>
        <dl>
          <dt v-for="(item, index) in state.searchHistory" :key="index" @click="gotoSearch(item)">
            {{ item }}
          </dt>
        </dl>
        <h3>热门搜索</h3>
        <dl>
          <dt v-for="(item, index) in hotSearchList" :key="index" @click="gotoSearch(item.title)">
            {{ item.title }}
          </dt>
        </dl>
      </div>

      <div class="search-list" v-show="state.searchFlag">
        <VantPullList
          v-model:loading="state.loading"
          :finished="state.finished"
          :data="state.taskList"
          @load="onLoad"
          @refresh="onRefresh"
        >
          <TaskList :taskList="state.taskList" />
        </VantPullList>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
import VantPullList from '@/components/VantPullList/index.vue';
import TaskList from '@/components/TaskList/index.vue';
import { hotSearch, taskAllList } from '@/api/task';

const router = useRouter();

// 历史纪录
const history = localStorage.getItem('searchHistory');
const state: any = reactive({
  value: '',
  searchFlag: false,
  loading: false,
  finished: false,
  taskList: [],
  pageNum: 1,
  pageSize: 10,
  searchHistory: history ? history.split(',') : [],
});

const getTaskAllList = async () => {
  state.loading = true;
  if (state.pageNum == 1) state.taskList = [];
  const res: any = await taskAllList({
    position_name: state.value,
    pageNum: state.pageNum,
    pageSize: state.pageSize,
  });
  if (res) {
    state.taskList = state.taskList.concat(res.records);
    state.loading = false;
    if (state.taskList.length >= res.total) {
      state.finished = true;
    } else {
      state.finished = false;
    }
  } else {
    showToast(res.msg);
    state.loading = false;
  }
};

const onSearch = (value: any) => {
  if (!value) return;
  state.searchFlag = true;
  if (!state.searchHistory.includes(value)) {
    state.searchHistory.push(value);
    localStorage.setItem('searchHistory', state.searchHistory);
  }
  getTaskAllList();
};
const onCancel = () => {
  state.searchFlag = false;
  state.value = '';
};

const gotoSearch = (name: string) => {
  state.value = name;
  onSearch(name);
};

// 清空搜索历史
const clearHistory = () => {
  localStorage.removeItem('searchHistory');
  state.searchHistory = '';
};

// 热门搜索->数据
interface itemType {
  title: string;
}
const hotSearchList = ref<itemType[]>([]);
const getHotSearch = async () => {
  const res: any = await hotSearch({ type: 1 });
  if (res) {
    hotSearchList.value = res.data;
  } else {
    showToast(res.msg);
  }
};
if (hotSearchList.value.length === 0) getHotSearch();

// 列表
const onLoad = () => {
  state.pageNum = state.pageNum + 1;
  getTaskAllList();
};
const onRefresh = () => {
  state.pageNum = 1;
  getTaskAllList();
};
</script>

<style lang="scss" scoped>
.task-search {
  background: #f9f9f9;

  height: 100%;
  min-height: 100vh;

  .search-cont {
    padding: 0 0.64rem;
  }
  h3 {
    font-size: 0.8rem;
    line-height: 0.8rem;
    font-weight: 500;
    color: #000000;
    margin: 0.85rem 0 0.85rem;
    display: flex;
  }
  h3 i {
    flex: 1;
    text-align: right;
    font-size: 0.9rem;
  }
  dl dt {
    background: #f5f5f5;
    border-radius: 0.16rem;
    padding: 0.45rem;
    font-size: 0.64rem;
    line-height: 0.64rem;
    font-weight: 400;
    color: #333333;
    margin-right: 0.51rem;
    margin-bottom: 0.53rem;
    display: inline-block;
  }
}

:deep(.van-search__content) {
  background: #f2f2f2;
  border-radius: 0.85rem;
}
:deep(.van-search--show-action) {
  padding-left: 0px;
  background: none;
}
:deep(.van-search__action) {
  font-size: 0.85rem;
  font-weight: 400;
  color: #666666;
  padding-right: 0px;
}
</style>
